<template>
    <div id="printTest">
        <div v-for="(item,index) in pageData.question" :key="index" class="testpaper" :class="skinName(pageData.skin)">
          <div class="testpaper-head">
            <div class="testpaper-head-box">
              <p class="detail-title" v-if="pageData.title">{{ pageData.title }}({{pageData.place}})口算训练</p>
              <p class="detail-sub-title" v-if="pageData.title">
                <span>班级<em></em></span>
                <span>学号<em></em></span>
                <span>姓名<em></em></span>
              </p>
            </div>
          </div>
          <div class="testpaper-bd">
            <ul class="detail-list">
              <li v-for="(item2,idx) in item" :key="idx">{{ item2.questionL + item2.opt + item2.questionR + '=' + item2.answer }}</li>
            </ul>
          </div>
          <p style="page-break-after: always;"></p>
        </div>
        
    </div>
</template>

<script>
    import Bus from './bus.js'
    export default {
        name: 'detail',
        data() {
          return {
            pageData: ''
          }
        },
        mounted: function () {
            // 用$on事件来接收参数
            Bus.$on('val', (data) => {
                this.pageData = data
            })
        },
        methods: {
            skinName(arr) {
              let name = '';
              arr.map(item =>{
                name += item
              })
              return name;
            }
        }
    }
</script>

<style scoped lang="scss">
    .detail-list {
        width: 750px;
        margin: 0 auto;
        li {
            display: inline-block;
            margin: 10px 15px;
            font-size: 14px;
            width: 120px;
            font-size: 18px;
        }
    }
    .detail-title {
        text-align: center;
        font-size: 26px;
    }
    .detail-sub-title {
        text-align: center;
        font-size: 18px;
        span {
            display: inline-block;
            margin: 0 20px;
            em {
                margin-left: 5px;
                width: 100px;
                display: inline-block;
                border-bottom: 1px solid #000;
            }
        }
    }
    .testpaper {
      width: 842px;
      height: 991px;
      margin: 0 auto;
      -webkit-print-color-adjust: exact;
      position: relative;
      background-repeat: no-repeat;
      background-size: 100% auto;
      .testpaper-head {
        overflow: hidden;
      }
      &.ktxiaoniao {
        background-image: url('./img/ktxiaoniao.png');
      }
      &.ktreqiqiu {
        background-image: url('./img/ktreqiqiu.png');
      }

      &.zgfhua {
        background-image: url('./img/zgfhua.png');
      }
      &.zgfbianpao {
        background-image: url('./img/zgfbianpao.png');
      }
    }
</style>